<template>
    <jb-crud-page
        ref="roleUserPage"
        :search-btn-shown="false"
        :reset-btn-shown="false"
        search-url="/api/admin/role/users"
        :search-conditions="{ roleId: props.roleId }"
    >
        <template #opt>
            <jb-btn
                confirm-text="确认清空用户吗？"
                :url="`/api/admin/role/clearUsers/${props.roleId}`"
                type="error"
                quaternary
                strong
                secondary
                @success="roleUserPage?.loadData()"
                >全部清空</jb-btn
            >
        </template>
        <template #default="{ state }">
            <vxe-table
                height="auto"
                border
                :column-config="{ resizable: true }"
                :seq-config="{ startIndex: state.tableStartIndex }"
                show-header-overflow
                show-overflow="tooltip"
                :row-config="{ isHover: true }"
                align="center"
                :data="state.list"
            >
                <jb-column type="seq" title="序号" width="60"></jb-column>
                <jb-column field="avatar" title="头像">
                    <template #default="{ row }">
                        <n-avatar round size="large" :src="row.avatar"></n-avatar>
                    </template>
                </jb-column>
                <jb-column field="name" title="姓名"></jb-column>
                <jb-column field="sex" title="性别">
                    <template #default="{ row }">
                        <n-tag :type="row.sex == 1 ? 'success' : 'info'">{{
                            row?.sex == 1 ? '男' : '女'
                        }}</n-tag>
                    </template>
                </jb-column>
                <jb-column field="username" title="用户名"></jb-column>
                <jb-column field="phone" title="手机号"></jb-column>
                <jb-column field="email" title="E-Mail"> </jb-column>
                <jb-column field="enable" title="是否启用" width="100">
                    <template #default="{ row }">
                        <n-tag v-if="row.enable" type="success"> 启用 </n-tag>
                        <n-tag v-else type="success"> 启用 </n-tag>
                    </template>
                </jb-column>
                <jb-column title="操作" width="120">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="删除"
                            icon="ant-design:delete-filled"
                            secondary
                            type="error"
                            class="mx-8px"
                            quaternary
                            circle
                            strong
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/role/removeUser/?roleId=${props.roleId}&userId=${row.id}`"
                            @success="roleUserPage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </vxe-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'

const roleUserPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const props = defineProps<{
    roleId: string
}>()
</script>
<style scoped></style>
